@import "~scss/_mixins";

.blocks {
	.block.blockDataview {
		.rowHead, .rowFoot, #rowHeadClone { display: grid; white-space: nowrap; height: 36px; }

		.selectionTarget.isSelectionSelected::after { left: 0px; width: 100%; }

		.rowHead { user-select: none; }
		.rowHead, .rowFoot { width: calc(100% - 4px); margin-left: 2px; }
		.rowHead.fixed { opacity: 0; visibility: hidden; pointer-events: none; }

		.rowFoot { box-shadow: 0px 1px var(--color-shape-secondary) inset; margin-top: -2px; height: 48px; }

		#rowHeadClone { position: fixed !important; background: var(--color-bg-primary); z-index: 1; }
		#rowHeadClone::after { content: ''; height: 1px; width: 100%; background: var(--color-shape-secondary); position: absolute; bottom: -1px; }
		#rowHeadClone {
			.rowHead { margin: 0px; width: 100%; }
		}

		.cellHead, .cellFoot { 
			@include text-small; text-align: left; color: var(--color-text-secondary); font-weight: 400; line-height: 20px; position: relative; height: 38px;
			display: inline-block; vertical-align: top; transition: background-color $transitionCommon; 
		}
		.cellHead.canDrag { cursor: grab; }
		.cellHead.canDrag {
			.cellContent { cursor: grab; }
		}

		.cellHead, .cellFoot {
			&.align1 { text-align: center; }
			&.align2 { text-align: right; }

			.cellContent { height: 36px !important; overflow: visible !important; }
			.flex { padding: 9px 14px; gap: 0px 6px; align-items: center; height: 100%; }
			.iconObject { width: 20px; height: 20px; margin: 0px; vertical-align: top; flex-shrink: 0; display: none; }

			.name { 
				display: inline-block; line-height: 20px; height: 20px; vertical-align: top; width: 100%; 
				@include text-overflow-nw;
			}

			.resize { width: 20px; height: calc(100% - 2px); position: absolute; right: 0px; top: 1px; cursor: col-resize; z-index: 10; }
		}

		.cellHead {
			.name { user-select: none !important; }
		}

		.cellHead.small { text-align: center; }
		.cellHead.small {
			.flex { display: inline-block; }
			.iconObject { display: block; }
			.name { display: none; }
		}

		.cellHead.last, .cellFoot.last { overflow: visible; padding: 9px 14px; cursor: default; }
		.cellHead.last {
			.icon.plus { margin: 0px; }
		}

		.cellFoot { height: 48px; @include text-common; color: var(--color-text-primary); }
		.cellFoot {
			&.align1 .flex { justify-content: center; }
			&.align2 .flex { justify-content: flex-end; }

			.result { display: flex; flex-direction: row; align-items: center; gap: 0px 4px; max-width: 100%; }
			.result {
				.value { @include text-overflow-nw; }
			}
			.name { width: auto !important; color: var(--color-text-secondary); }
			.cellContent { height: 48px !important; }
		}

		.cellHead.isDragging { border: 0px; height: 38px; }
		.cellHead.isDragging::after {
			content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0; pointer-events: none;
			background-color: var(--color-shape-highlight-light);
		}
		.cellHead.isDragging {
			.resize { display: none; }
		}

		.cellHead.cellKeyHover::after, 
		.cellHead.hover::after,
		.cellFoot.cellKeyHover::after, 
		.cellFoot.hover::after 
		{ 
			content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0; pointer-events: none;
			background-color: var(--color-shape-highlight-light);
		}

		.cellFoot.cellKeyHover::after, .cellFoot.hover::after { height: calc(100% - 1px); }

		.cellHead.last::after, .cellHead.hover::after { background: none; }
		.cellHead.last:hover, .cellHead.last.hover {
			.icon.plus { background-image: url('~img/icon/plus/menu1.svg'); }
		}

		.viewContent.viewGrid { width: 100%; position: relative; padding: 0px; }
		.viewContent.viewGrid {
			.loadMore { padding: 10px 2px; box-shadow: 0px 1px var(--color-shape-secondary) inset; }

			.icon.checkbox { vertical-align: top; }
			.icon.edit { width: 36px; height: 48px; position: absolute; right: 0px; top: 0px; }

			.row { white-space: nowrap; box-shadow: 0px 1px var(--color-shape-secondary) inset; margin-left: 2px !important; width: calc(100% - 4px); height: 48px; }
			.row.isArchived *, .row.isDeleted * { text-decoration: line-through; color: var(--color-control-active); }
			.row:hover { background-color: var(--color-shape-highlight-light); }
			.row.add { margin-top: -2px; }

			.row > .selectionTarget,
			.row > .dropTarget > .selectionTarget { display: grid; }

			.cellContent { width: 100%; overflow: hidden; height: 20px; line-height: 20px; }
			.cellContent {
				.empty { visibility: hidden; display: block; }
				.name, .empty { line-height: 20px; @include text-overflow-nw; width: 100%; }
			}

			.cell.isName, .cellContent.isName { cursor: default; }
			.cellContent.isName { display: flex; flex-direction: row; align-items: center; gap: 0px 6px; }

			.cell.isName.canEdit:hover {
				.name { width: calc(100% - 40px) !important; }
				.icon.edit { display: block; }
			}

			.row.isNote {
				.cell.isName.canEdit:hover {
					.name { width: 100% !important; }
					.icon.edit { display: none; }
				}
			};
			
			.cell.c-object, .cell.c-file {
				:not(.align1, .align2) { padding-right: 0px; }
				&.align2 { padding-left: 0px; }
			}
			.cellContent.c-object, .cellContent.c-select, .cellContent.c-file {
				.wrap { height: 100%; overflow: hidden; white-space: nowrap; }
			}

			.cell.c-checkbox {
				&.align1 .cellContent { justify-content: center; }
				&.align2 .cellContent { justify-content: flex-end; }
			}
				
			.cell { display: inline-block; height: 48px; padding: 14px; vertical-align: top; position: relative; word-break: break-word; }
			.cell.cellKeyHover { background-color: var(--color-shape-highlight-light); }
			.cell {
				&.align1 { text-align: center; }
				&.align1 {
					.over { justify-content: center; }
				}
				&.align2 { text-align: right; }
				&.align2 {
					.over { justify-content: flex-end; }
				}
			}

			.cell.isEditing {
				.cellContent { height: 100% !important; min-width: 300px; padding: 14px; border-radius: 4px; }
				.cellContent.isName { padding: 0px 14px !important; }
				.cellContent.isName {
					.iconObject { margin: 14px 0px; }
					.input-text { height: 48px; width: calc(100% - 30px) !important; }
					.name { width: 100%; }
				}
			}
			.cell.isEditing.c-select { 
				.cellContent { padding-bottom: 10px; height: auto !important; }
				.wrap { overflow: visible; white-space: normal; }
			}
			.cell.isEditing.c-object { 
				.cellContent { padding-bottom: 12px; height: auto !important; }
				.wrap { overflow: visible; white-space: normal; }
			}

			.cell.isEditing.c-select, .cell.isEditing.c-object {
				.placeholder { padding: 14px; }
			}

			.cell.isEditing.c-longText { 
				.cellContent { display: none; }
			}
			.cell.isEditing.c-checkbox { 
				.cellContent { min-width: unset; }
			}
		}

		.viewContent.viewGrid.isCollection {
			.cellHead:first-child .flex, .cell:first-child { padding-left: 20px; }
			.cell.isEditing.isName { 
				.cellContent { padding-left: 20px !important; }
			}

			.row:hover {
				.icon.drag { opacity: 1; }
			}

			.dropTarget.isOver { box-shadow: 0px 0px; }
			.dropTarget.isOver::before { 
				content: ""; position: absolute; background: var(--color-control-accent); width: 100%; height: 2px; border-radius: 2px; left: 0px; z-index: 1;
			}
			.dropTarget.isOver.top::before { top: -1px; }
			.dropTarget.isOver.bottom::before { bottom: -1px; }
		}
	}

	.block.blockDataview.isInline {
		.viewContent.viewGrid { padding: 0px; }
		.viewContent.viewGrid {
			.row { height: 40px; }

			.cellHead:first-child {
				.flex { padding-left: 0px; }
			}

			.cell { height: 40px; padding: 10px 14px; }
			.cell:first-child { padding-left: 0px; }

			.cell.isEditing { padding: 0px; }
			.cell.isEditing {
				.cellContent { padding: 10px 14px; }

				.cellContent.isName { padding-left: 6px !important; }
				.cellContent.isName {
					.iconObject { margin-top: 10px; margin-bottom: 10px; }
					.input-text { height: 39px; }
				}
			}

			.cell.isEditing.c-select, .cell.isEditing.c-object {
				.placeholder { padding: 10px 14px; }
			}

			.cell.isEditing.c-select {
				.itemWrap { margin-bottom: 0px; }
			}

			.icon.edit { height: 40px; }
			.loadMore { padding-top: 11px; margin-top: 0px; }
		}
	}
}
